<template>
    <p>初始message:{{ message }}</p>
    <p>反转之后的message:{{ reverseMessage }}</p>
    <p>初始的message的组成元素:{{ splitMessage }}</p>
    <p>反转之后的message的组成元素{{ splitReverseMessage }}</p>
    <button @click="updateMessage">更改</button>
</template>

<script setup>
import { ref,computed } from 'vue';
const message = ref('asdfghjkl')
const reverseMessage = computed(()=>
    message.value.split('').reverse().join('')
)
const splitMessage = computed(()=>
    message.value.split('').join(' ')
)
const splitReverseMessage = computed(()=>
    message.value.split('').reverse().join(' ')
)
const updateMessage = () =>{
    message.value = '123456789'
}

</script>

<style scoped></style>
